<template>
  <div>
    
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">电商后台管理</el-breadcrumb-item>

      <el-breadcrumb-item>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>库存修改</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <div class="main">
        <div class="nameMain information"> 
          <label for>商品id：</label>
          <input type="text" v-model="product._id" />
        </div>
        <div class="nameMain information">
          <label for>商品名称：</label>
          <input type="text" v-model="product.goodsname" />
        </div>
        <div class="ageMain information">
          <label for>商品价格：</label>
          <input type="text" v-model="product.price" />
        </div>
        <div class="genderMain information">
          <label for>商品产地：</label>
          <input type="text" v-model="product.orgin" />
        </div>
        <div class="characterMain information">
          <label for>商品规格：</label>
          <input type="text" v-model="product.guige" />
        </div>
        <div class="characterMain information">
          <label for>商品类型: </label>
          <input type="text" v-model="product.types" />
        </div>
         <div class="characterMain information">
          <label for>商品描述: </label>
          <input type="text" v-model="product.descs" />
        </div>
        <div class="characterMain information">
          <label for>所属店铺:</label>
          <input type="text" v-model="product.shop" />
        </div>
        <div class="equipMain information">
          <label for>商品数量：</label>
          <input type="text" v-model="product.num" />
        </div>
      </div>
    </div>
    <!-- <button @click="updataproduct(product)">确认修改</button> -->
    <button @click="updataproduct(product)">确认修改</button>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const {mapState,mapGetters,mapMutations,mapActions} = createNamespacedHelpers("product");
export default {
  data() {
    return {
  //     product:{
  //      goodsname: "",
  //     orgin: "",
  //     price: "",
  //     num: "",
  //     types: "",
   //    id:"",
  //     guige: "",
  //     descs: "",
  //     shop: ""
  //     }
      
    };
  },
  computed:{
     ...mapState(["product"])
     
  },
   created(){
    this.getid();
    this.getupdataproductID(this.id)
  },
  methods: {
  getid(){
   this.id= this.$route.query
   console.info("修改ID",this.id)
   },
    ...mapActions(["getupdataproductID","updataproduct"])
  
  // getupdataproduct(){

   },
  
}
</script>
<style  scoped>
.container {
  width: 700px;
  /* display: flex;
  justify-content: center; */
  margin: 0 auto;
}
.avatar-uploader{
  /* background-color: red; */
  border: 1px solid #999;
}
.main {
  width: 500px;
  margin-top:20px;
  margin-left: 80px;
  padding: 20px;
  border: 1px solid #999;
  border-radius: 10px;
  margin-bottom:10px ;
}
.main h3 {
  background-color: rgb(160, 160, 160);
  color: #fff;
  line-height: 35px;
  text-align: start;
  padding-left: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.information {
  font-size: 16px;
  display: flex;
  margin: 10px 0px;
  align-content: center;
}
.button {
  display: flex;
  justify-content: center;
}
.information input {
  outline: none;
  height: 30px;
  width: 300px;
  padding-left: 5px;
}
.information select {
  height: 25px;
  width: 50px;
  outline: none;
}
.information span {
  margin: 0px 10px 0px 5px;
}
.imgMain input {
  width: 170px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader-icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.avatar {
  width: 100px;
  height: 100px;
}
.el-upload-dragger {
  width: 150px;
  height: 150px;
}
.el-upload-dragger .el-icon-upload {
  margin: 20px 0 16px;
}
.el-main[data-v-452a4712] {
  text-align: start;
}
.el-main {
  display: flex;
  justify-content: center;
}
</style>